<template>
  <view class="normal-login-container">

    <view class="logo-content">
      <view class="back_box">
        <image :src="backImg" mode="widthFix"></image>
      </view>
    </view>
    <view class="login-form-content">
      <view class="input-item flex align-center">
        <view class="iconfont icon-user icon"></view>
        <image :src="nameImg"></image><input v-model="loginForm.username" class="input" type="text" placeholder="请输入账号"
          maxlength="30" />
      </view>
      <view class="input-item flex align-center">
        <view class="iconfont icon-password icon"></view>
        <image :src="pwdImg"></image><input v-model="loginForm.password" type="password" class="input"
          placeholder="请输入密码" maxlength="20" />
      </view>
      <view class="action-btn">
        <button v-if="!agreeFlag" @click="handleLogin" class="login-btn cu-btn block bg-blue lg round">登录</button>
        <button v-else open-type="agreePrivacyAuthorization" @agreeprivacyauthorization="handleLogin"
          class="login-btn cu-btn block bg-blue lg round">登录</button>
      </view>

      <view class="read">
        <view class="read-box" @click="handleChange">
          <image v-if="agreeFlag" :src="checkImg" style="width: 30rpx; height: 30rpx"></image>
          <image v-else :src="uncheckImg" style="width: 30rpx; height: 30rpx"></image>
        </view>
        我已阅读并同意
        <label class="agree-box" @click="handlePrivacy">《隐私及用户协议》</label>
      </view>

      <view class="title-split">
        <view></view>
        <text>其他登录方式</text>
        <view></view>
      </view>
      <view class="action-btn">
        <image @click="handlewsLogin" src="../static/images/login/weixin.png" mode=""></image>
      </view>
    </view>
    <agreement v-show="privacyShow" ref="privacyBox" @handleAgree="handleAgreeFun" class="privacyBox1"></agreement>
  </view>
</template>

<script>
  import func from '@/utils/funlogin.js';
  import { getTernantIdByUserName } from '@/api/me.js';
  import { getOpenIdByCode } from '@/api/login.js';
  import { setTenantId, setToken, setOpenId } from '@/utils/auth.js';
  import storage from '../utils/storage';
  import constant from '@/utils/constant'
  import { toast } from '@/utils/common.js';
  import config from '@/config'
  export default {
    name: 'Login',
    data() {
      return {
        checkedFlag: false,
        agreeFlag: false,
        agree: 0, // 是否勾选已阅读
        privacyShow: true,
        captchaEnabled: true, // 验证码开关 TODO 芋艿：需要抽到配置里
        globalConfig: getApp().globalData.config,
        loginForm: {
          username: '',
          password: ''
        }
      };
    },
    computed: {
      checkImg() {
        if (this.$store.state.user.curTypeColor == '#D22C2C') {
          return config.baseImgUrl + '/checked1.png';
        } else if (this.$store.state.user.curTypeColor == '#409EFE') {
          return config.baseImgUrl + '/checked.png';
        } else {
          return config.baseImgUrl + '/checked.png';
        }
      },
      uncheckImg() {
        return config.baseImgUrl + '/unchecked.png';
      },
      logo() {
        if (this.$store.state.user.curTypeColor == "#D22C2C") {
          return config.baseImgUrl + '/logo1.png'
        } else if (this.$store.state.user.curTypeColor == "#409EFE") {
          return config.baseImgUrl + '/logo.png'
        } else {
          return config.baseImgUrl + '/logo.png'
        }
      },
      backImg() {
        if (this.$store.state.user.curTypeColor == "#D22C2C") {
          return config.baseImgUrl + '/logo_back1.png'
        } else if (this.$store.state.user.curTypeColor == "#409EFE") {
          return config.baseImgUrl + '/logo_back.png'
        } else {
          return config.baseImgUrl + '/logo_back.png'
        }
      },
      nameImg() {
        if (this.$store.state.user.curTypeColor == "#D22C2C") {
          return config.baseImgUrl + '/name1.png'
        } else if (this.$store.state.user.curTypeColor == "#409EFE") {
          return config.baseImgUrl + '/name.png'
        } else {
          return config.baseImgUrl + '/name.png'
        }
      },
      pwdImg() {
        if (this.$store.state.user.curTypeColor == "#D22C2C") {
          return config.baseImgUrl + '/pwd1.png'
        } else if (this.$store.state.user.curTypeColor == "#409EFE") {
          return config.baseImgUrl + '/pwd.png'
        } else {
          return config.baseImgUrl + '/pwd.png'
        }
      }
    },
    onReady() {
      // 隐私政策
    },
    methods: {
      handleAgreeFun(data) {
        console.log('进入同意勾选checkbox');
        this.agree = data
        this.checkedFlag = data == 1 ? true : false
      },
      // 隐私协议
      handlePrivacy() {
        wx.openPrivacyContract({
          success: res => {
            console.log('openPrivacyContract success')
          },
          fail: res => {
            console.error('openPrivacyContract fail', res)
          }
        })
      },
      handleChange(e) {
        this.agreeFlag = !this.agreeFlag;
        if (this.agreeFlag) {
          this.$refs.privacyBox.agreeClick(this.agreeFlag);
        }
      },
      //微信授权登录
      handlewsLogin() {
        //登录逻辑梳理
        func.wechatAppLogin();
      },
      // 登录方法
      async handleLogin(params) {
        //校验输入
        if (this.loginForm.username === '') {
          this.$modal.msgError('请输入您的账号');
          return
        }
        if (this.loginForm.password === '') {
          this.$modal.msgError('请输入您的密码');
          return
        }
        if (!this.agreeFlag) {
          this.$modal.msgError('请勾选用户协议');
          return
        }
        // 直接登录
        await this.pwdLogin({});
      },
      // 密码登录
      async pwdLogin() {
        this.$modal.loading('登录中，请耐心等待...');
        // 执行登录
        // 获取租户 id
        try {
          let res = await getTernantIdByUserName(this.loginForm.username);
          this.$modal.closeLoading();
          if (res.code == 0) {
            setTenantId(res.data);
            this.$store.dispatch('Login', this.loginForm).then(async (res) => {
              if (res === 0) {
                wx.reLaunch({
                  url: '/pages/devices/working'
                })
              } else {
                this.$tab.reLaunch('/pages/index');
              }
            }).catch(err => {
              toast(err.msg)
            });
          } else {
            //用户不存在
            toast(res.msg)
          }
        } catch (e) {
          console.log(e, 'getTernantIdByUserName');
        }
      },
      // 登录成功后，处理函数
      loginSuccess() {
        // 读取菜单权限数据
        this.$store.dispatch('GetUserAuthority').then((res) => {
          if (res.code == '200') {
            this.loginSuccessFul()
          } else {
            console.log('访问菜单权限出错...');
          }
        });
      },
      loginSuccessFul() {
        // 设置用户信息
        this.$store.dispatch('GetInfo').then(() => {
          this.$tab.reLaunch('/pages/indexs');
        });
        this.$store.dispatch('GetUserDictData');

      }
    }
  };
</script>

<style lang="scss">
  .normal-login-container {
    width: 100%;
    background-color: #fff;
    height: 100vh;

    .logo-content {
      width: 95%;
      text-align: center;
      margin: 0 2%;
      background: #fff;
      padding: 3%;

      image {
        border-radius: 4rpx;
        width: 375pt;
        height: auto;
      }

      image.logo {
        border-radius: 4rpx;
        margin-top: 41px;
        width: 65pt;
      }

      .back_box {
        margin-bottom: 10pt;
      }
    }

    .login-form-content {
      text-align: center;
      margin: 20rpx auto;
      width: 700rpx;

      .input-item {
        margin: 20rpx auto;
        background-color: #ffffff;
        height: 80rpx;
        border-radius: 20rpx;
        position: relative;
        border: 1px solid #C7CEDE;

        image {
          position: absolute;
          width: 50rpx;
          height: 55rpx;
          left: 10rpx;
        }

        .icon {
          font-size: 35.55rpx;
          margin-left: 10rpx;
          color: #999;
        }

        .input {
          width: 700rpx;
          font-size: 30.22rpx;
          line-height: 34rpx;
          text-align: left;
          padding-left: 55rpx;
        }
      }

      .login-btn {
        font-size: 30.22rpx;
        margin-top: 40rpx;
        height: 80rpx;
      }

      .xieyi {
        color: #333;
        margin-top: 20rpx;
      }
    }

    .action-btn image {
      width: 80rpx;
      height: 80rpx;
    }

    .read {
      margin-bottom: 40rpx;
      padding: 20rpx 0;
      text-align: left;
      font-size: 24.88rpx;
      margin-left: 5rpx;
      position: relative;

      checkbox {
        transform: scale(0.7);
        text-indent: 10px;
      }

      .text-box {
        position: absolute;
        top: 13px;
        left: 37px;
        width: 90vw;
      }

      .agree-box {
        color: #409eff;
        position: absolute;
        top: 12px;
        left: 210rpx;
      }
    }

    .title-split {
      margin: 48rpx 0 28rpx 0;
      display: flex;
      color: #999;
      align-items: center;
      justify-content: center;

      text {
        font-weight: 500;
        font-size: 26.66rpx;
        padding: 0 24rpx;
      }

      view {
        width: 98rpx;
        height: 4rpx;
        border-radius: 3rpx;

        &:first-of-type {
          background: linear-gradient(90deg, rgba(98, 98, 98, 0) 0%, #333333 100%);
        }

        &:last-of-type {
          background: linear-gradient(90deg, #333333 0%, rgba(98, 98, 98, 0) 100%);
        }
      }
    }
  }
</style>